<template>
    <div class="slider-wrapper">
        <div v-show="isOpen" class="slider-content">
            <slot/>
        </div>
        <div :class="{'show-slider': !isOpen}" class="slider-toggle" @click="toggleSlider">
            <div v-if="isOpen" class="hide-icon">
                <i class="iconfont icon-angledoubleleft"/>
            </div>
            <div v-else class="show-icon">
                <i class="iconfont icon-angledoubleright"/>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        isOpen: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        toggleSlider() {
            this.$emit('toggleSlider', this.isOpen)
        }
    }
}
</script>
